<template>
    <view class="good_card" @click="openDetail()">
        <pub-image class="img" :src="info.cover" />
        <div class="text">
            <div class="name">{{ info.goodsName }}</div>
            <div class="price">
                <span class="span_2">￥</span>
                <span class="span_3">{{info.salePrice}}</span>
            </div>
            <div class="jf_txt" v-if="info.integral">奖:{{info.integral}}积分</div>
        </div>
    </view>
</template>

<script>
export default {
    props: {
        info: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {};
    },
    computed: {},
    mounted() { },
    methods: {
        openDetail(){
            this.$comFun.openWin('/pages/index/good_info', {
                orderType: this.$constant.orderType.crystalGoods,
                spuId: this.info.spuId,
                goodInfo: JSON.stringify(this.info),
            });
        }
    },
};
</script>

<style lang="scss" scoped>
.good_card {
    width: 100%;
    background-color: #fff;
    border-radius: 10rpx;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;

    .img {
        width: 100%;
        height: 340rpx;
        border-bottom-left-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
        overflow: hidden;
    }

    .text {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 16rpx;

        .name {
            width: 100%;
            line-height: 32rpx;
            color: #3d3d3d;
            font-size: 24rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0 0 10rpx 0;
        }


        .price {
            width: 50%;
            height: 40rpx;
            line-height: 40rpx;
            display: flex;
            align-items: baseline;
            color: #e62017;
            font-size: 24rpx;

            .span_2 {
                height: 30rpx;
                line-height: 30rpx;
                transform: scaleX(0.9);
                transform-origin: 0 0;
            }

            .span_3 {
                font-weight: 700;
                font-size: 40rpx;
                transform: scaleX(0.9);
                transform-origin: 0 0;
            }
        }

        .jf_txt {
            width: 50%;
            height: 40rpx;
            color: #E62017;
            font-size: 20rpx;
            line-height: 40rpx;
            text-align: right;
        }
    }
}
</style>
